<template>
  <div class="singerDetail">
    <MusicList :music-list="songList" object-key="SINGER" />
  </div>
</template>

<script>
import useApi from './useApi'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import MusicList from '@/components/MusicList/MusicList'
export default {
  name: 'SingerDetail',
  components: {
    MusicList
  },
  setup() {
    const songList = ref([])
    const { params } = useRoute()
    useApi(params, songList)
    return {
      songList
    }
  }
}
</script>

<style lang="scss" scoped>
.singerDetail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
}
</style>
